<template>
	<view class="Test">
		<!-- 状态栏,解决小程序顶部状态位置问题 -->
		<view style="background: rgb(0, 0, 0); position: fixed; top: 0px; width: 100%; z-index: 100;" :style="{height:statusBarHeight+'px'}"></view>
		<view   :style="{height:statusBarHeight+'px'}"></view>
		<scroll-view class="Test-content">
			<my-swiper :list="swperList"></my-swiper>
			<view class="notice-barotext">
				<uni-notice-bar :speed="50" scrollable showIcon="true" :text="noticText"></uni-notice-bar>
			</view>
			<view class="test-goto">
				<view class="goto-left">
					<view class="goto-left-1"  @click="goToTest('前端框架')" >
						<view class="goto-left-nei">
							<view class="nei-image">
								<view class="image-cengt">
									<image src="https://img.alicdn.com/imgextra/i2/847355890/O1CN01ANcApC1tNfWQJBFe4_!!847355890.png" mode=""></image>
								</view>
							</view>
							<view class="nei-title">
								前端框架
							</view>
						</view>
						
					</view>
					<view class="goto-left-1" @click="goToTest('JavaScript')" >
						<view class="goto-left-nei">
							<view class="nei-image">
								<view class="image-cengt">
									<image src="https://img.alicdn.com/imgextra/i2/847355890/O1CN01yx8zew1tNfWWX2t46_!!847355890.png" mode=""></image>
								</view>
								
							</view>
							<view class="nei-title">
								JavaScript
							</view>
						</view>
						
					</view>
					<view class="goto-left-1" @click="goToTest('HTML-CSS')" >
						<view class="goto-left-nei">
							<view class="nei-image">
								<view class="image-cengt">
									<image src="https://img.alicdn.com/imgextra/i2/847355890/O1CN01DCDTec1tNfWOxAl4J_!!847355890.png" mode=""></image>
								</view>
								
							</view>
							<view class="nei-title">
								HTML-CSS
							</view>
						</view>
						
					</view>
					<view class="goto-left-1" @click="goToTest('项目优化')" >
						<view class="goto-left-nei">
							<view class="nei-image">
								<view class="image-cengt">
									<image src="https://img.alicdn.com/imgextra/i2/847355890/O1CN01whyAnE1tNfWGAP2A2_!!847355890.png" mode=""></image>
								</view>
								
							</view>
							<view class="nei-title">
								项目优化
							</view>
						</view>
						
					</view>
				</view>
				<view class="goto-content">
					<view  @click="goToTest('前端综合')"  class="goto-content-top">
						<view class="goto-content-cli">
							<view class="content-cli">
									<view class="content-cli-texts">
										<view class="cli-texts-title">
											自我感觉
										</view>
										<text class="cli-texts-xi">天下第一</text>
										<view class="cli-texts-bule">
											99999<text  class="cli-texts-xi">%</text>
										</view>
									</view>
							<view class="content-cli-tooen">
								<text> 前端混合记忆 </text>
							</view>
								
							</view>
						</view>
					</view>
					<view  @click="goToTest('综合')" class="goto-content-top goto-content-bottom">
						
							<view class="goto-content-cli">
								<view class="content-cli">
									<view class="content-cli-texts">
										<view class="cli-texts-title">
											实际
										</view>
										<text class="cli-texts-xi">小菜鸡</text>
										<view class="cli-texts-bule">
											0.0009<text class="cli-texts-xi">%</text>
										</view>
									</view>
									<view class="content-cli-tooen ot">
										<text> 所有混合记忆 </text>
									</view>
								
								</view>
								
							</view>
					</view>
				</view>
				<view class="goto-right">
					<view class="goto-left-1" @click="goToTest('jQuery')" >
						<view class="goto-left-nei">
							<view class="nei-image">
								<view class="image-cengt">
									<image src="https://img.alicdn.com/imgextra/i1/847355890/O1CN01HxFpeX1tNfWKoIisC_!!847355890.png" mode=""></image>
								</view>
								
							</view>
							<view class="nei-title">
								jQ知识
							</view>
						</view>
					</view>
					<view class="goto-left-1" @click="goToTest('JAVA')" >
						<view class="goto-left-nei">
							<view class="nei-image">
								<view class="image-cengt">
									<image src="https://img.alicdn.com/imgextra/i1/847355890/O1CN01tunPcA1tNfWShyw6Z_!!847355890.png" mode=""></image>
								</view>
								
							</view>
							<view class="nei-title">
								JAVA知识
							</view>
						</view>
						
					</view>
					<view class="goto-left-1">
						<view class="goto-left-nei" @click="goToTest('Linux')" >
							<view class="nei-image">
								<view class="image-cengt">
									<image src="https://img.alicdn.com/imgextra/i1/847355890/O1CN019M9Eb51tNfWMs4n79_!!847355890.png" mode=""></image>
								</view>
								
							</view>
							<view class="nei-title">
								服务器知识
							</view>
						</view>
						
					</view>
					<view class="goto-left-1" @click="goToTest('其他')" >
						<view class="goto-left-nei">
							<view class="nei-image">
								<view class="image-cengt">
									<image src="https://img.alicdn.com/imgextra/i1/847355890/O1CN01toZU0E1tNfWVp4grW_!!847355890.png" mode=""></image>
								</view>
								
							</view>
							<view class="nei-title">
								其他知识
							</view>
						</view>
						
					</view>
				</view>
			</view>
				<!-- <button @click="goToTest('综合')" type="default">测试出题页面</button> -->
				<!-- #ifndef MP-WEIXIN -->
			<view class="ship cainixihuan"  @click="goToVido(videoList)">
				<view class="title">
					{{videoList.title}}
				</view>
			<view class="ship-bot">
				<view class="ship-lef"> 
				<view class="icon">
					<image src="https://img.alicdn.com/imgextra/i2/847355890/O1CN01t1gSaS1tNfWW77Frq_!!847355890.png" mode=""></image>
				</view>
				<image :src="videoList.poster" mode=""></image>

				 </view>
				<view class="ship-rig">
					<view class="fu-title inforTitle">
						<text>{{videoList.fu_title}}</text>
						
					</view>
					<view class="shijian">
						{{videoList.time}}
					</view>
				</view>
			</view>
			</view>
			
			<!-- #endif -->
			<view class="cainixin" @click="reload">
				——  知识速记  ——
			</view>
			<view class="newsify">
				<view class="guangg-content list">
					<index-list :articleList="articleList"></index-list>
				
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				articleList:[],
				videoList:{
					url:''
				},
				statusBarHeight: 20,
				noticText:'要想干到35，基础一定要牢靠，鲁迅说的，奥里给！！！',
				swperList:[ ],
				shareData: {
					title: '懒七日常知识点整理',
					path: '',
					imageUrl: '',
					content: '',
					desc: ''
				}
			}
		},
		computed: {
			...mapState(['user_id'])
		},
			//#ifdef MP-WEIXIN
		onShareAppMessage () {
			return {
				title: this.shareData.title,
				path: this.shareData.path,
				imageUrl: this.shareData.imageUrl,
				content: this.shareData.content,
				desc: this.shareData.desc,
				success: res => {
					console.info(res)
				}
			}
		},onShareTimeline: function(res) {
			return {
				title: this.shareData.title,
				path: this.shareData.path,
				imageUrl: this.shareData.imageUrl,
				content: this.shareData.content,
				desc: this.shareData.desc,
				success: res => {
					console.info(res)
				}
			}
		},
		//#endif
		created() {
			this.get_images(3, "长轮播")
			// 同步获取手机信息 , statusBarHeight 为导航栏的高度
			const info = uni.getSystemInfoSync();
			// 给状态栏赋值当前手机的状态栏高度
				this.statusBarHeight = info.statusBarHeight
				this.get_video()
				this.get_article_sample()
		},
		methods: {
			async get_images(mysize1,type){
				let imagesList = await this.$api.get_images({
					mysize1: mysize1,
					type: type
				})
				if (!imagesList) return false;
					this.swperList = imagesList
				console.log(imagesList);
			},
			goToVido(item){
				uni.navigateTo({
					url:"/pages/views/vido-view/vido-view?item=" + encodeURIComponent(JSON.stringify(item))
				})
			},
			goToTest(type){
				uni.navigateTo({
					// url:'../../views/test-conut/test-conut?type='+type
					url:'../../views/test-issuer/test-issuer?type='+type
				})
			},
			reload(){
				this.get_article_sample()
			},
						async get_article_sample(){
								let articleList = await this.$api.get_article_sample({user_id:this.user_id})
								if (articleList.length === 0) {
									return false
								}
								this.articleList = articleList
						},
			async get_video(){
				let videoList = await this.$api.get_video({
					user_id: this.user_id
				})
				if (!videoList) return false;
				this.videoList = videoList[0]
				console.log(videoList);
			},
		}
	}
</script>

<style scoped lang="scss">
.Test{
	
	.icon{
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: rgba(0,0,0,0.3);
		position: absolute;
		z-index: 99;
		top: 50%;
		left: 50%;
		overflow: hidden;
		transform: translate(-50%, -50%);
		image{
			width: 100%;
			height: 100%;
		}
	}
	.newsify {
		display: flex;
		justify-content: center;
		.list{
			margin-top: 10px;
		}
	.guangg-content{
		margin-top: 10px;
		background: #fff;
		border-radius: 5px;
		// width: 95%;
	}
		}
	.cainixin{
		font-weight: bold;
		margin-top: 15px;
		font-size: 16px;
		color: #666;
			display: flex;
			justify-content: center;
			align-items: center;
	}
				.inforTitle {
					font-size: 16px;
					position: relative;
					color: #333;
					font-weight: 400;
					line-height: 1.2;
					// padding-right: 25px;
					text {
						// 俩行超出溢出
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
					}
				}
	.Test-content{
		padding: 15px;
		box-sizing: border-box;	
		.cainixihuan{
			border-radius: 10px;
			background: #dfdfdf;
			height: 80px;
			align-items: center;
			margin-top: 15px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #999;
		}
		.ship{
			box-sizing: border-box;
			background: #fffbe8;
			padding: 10px;
			width: 100%;
			height: 150px;
			display: flex;
			flex-direction: column;
			color: #333;
			.title{
				font-size: 18px;
				font-weight: bold;
				padding-bottom: 10px;
			}
			.ship-bot{
			box-sizing: border-box;
				width: 100%;
				flex: 1;
				display: flex;
				#myVideo{
			box-sizing: border-box;
					border-radius: 10px;
					overflow: hidden; 
					
				}
				.ship-lef{
			box-sizing: border-box;
					width: 100%;
					height: 100%;
					border-radius: 10px;
					overflow: hidden; 
					position: relative;
					image{
						width: 100%;
						height: 100%;
						border-radius: 10px;
						overflow: hidden;
					}
				}
				.ship-rig{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding-left: 5px;
				}
				.shijian{
					font-size: 14px;
					color: #999;
				}
			}
		}
		.notice-barotext{
			margin-top: 15px;
		}
		.test-goto{
			height: 400px;
			display: flex;
			.goto-content{
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				padding: 0 30px;
				box-sizing: border-box;
				.goto-content-top{
					width: 100%;
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					.goto-content-cli{
						width: 100%;
						height: 0;
						padding-top: 100%;
						// background-color: #0000FF;
						box-sizing: border-box;
						// border: 5px solid #DDDDDD;
						// border-radius: 50%;
						position: relative;
						overflow: hidden;
						.content-cli{
							box-sizing: border-box;
							border: 5px solid #e7e7e7;
							border-radius: 50%;
							position: absolute;
							top: 0;
							right: 0;
							left: 0;
							bottom: 0;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							.content-cli-texts{
							justify-content: center;
							flex-direction: column;
							align-items: center;
							display: flex;
							margin-bottom: 40 px;
							.cli-texts-xi{
								color: #aaa;
								font-size: 11px;
							}
								.cli-texts-title{
									font-weight: bold;
								}
								.cli-texts-bule{
									color: #2f7edd;
									font-weight: bold;
									font-size: 32px;
									padding-bottom: 15px;
								}
							}
						.content-cli-tooen{
							position: absolute;
							text-align: center;
							color: #fff;
							bottom: 0;
							left: 0;
							right: 0;
							font-weight: bold;
							height: 35px;
							background-color: #22c4ff;
							font-size: 14px;
						}
						.ot{
							background-color: #22c4ff;
							
						}
						}
					}
				}
			}
			.goto-left,.goto-content,.goto-right{
				display: flex;
				flex-direction: column;
				justify-content: space-around;
			}
			.goto-left-1{
				flex: 1;
				width:60px;
				.goto-left-nei{
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					// padding-top: 100%;
					.nei-image{
						width: 80%;
						height: 0;
						padding-top: 80%;
						position: relative;
						.image-cengt{
							// background: #fff;
							border-radius: 50%;
							position: absolute;
							top: 0;
							right: 0;
							left: 0;
							bottom: 0;
							image{
								width: 100%;
								height: 100%;
							}
						}
					}
					.nei-title{
						font-size: 12px;
						margin-top:5px;
						white-space: nowrap;
					}
				}
			}
		}
	}
}
</style>
